<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: xwj32
  Date: 2023-05-26
  Time: 17:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hospital Call System</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/5.0.1/css/bootstrap.min.css">
    <jsp:include page="include/mangerheadtag.jsp"/>
</head>
<body>
<jsp:include page="include/mangermenu.jsp"/>
<jsp:include page="include/mangerhead.jsp"/>
<div class="container my-5" >
    <h1 class="text-center mb-5" style="margin-top: 80px">医生叫号平台</h1>
    <div class="row" style="margin-left: 150px">
        <div class="col-md-4">
            <h2><img src="images/img/叫号.png">等待叫号:</h2>
            <ul id="waitList" class="list-group">
                <li class="list-group-item active">候诊病人</li>
                <li class="list-group-item" style="border-radius: 10px;">下一位候诊病人: ${sessionScope.head_patient.patient_name} ${sessionScope.head_patient.sign_in_situation}</li>
            </ul>
            <!-- 设置a标签为按钮样式 -->
            <div class="d-grid gap-2 mt-5">
                <a class="btn btn-success btn-lg" href="<%=request.getContextPath()%>/ManageQueue?action=call&rid=${sessionScope.head_patient.outpatient_id}" id="callBtn"  >叫号</a>
                <a href="#" id="recallBtn" class="btn btn-secondary btn-lg" >重呼</a>
                <a class="btn btn-warning btn-lg" href="<%=request.getContextPath()%>/ManageQueue?action=SignOver&record_id=${sessionScope.head_patient.outpatient_id}" id="skipBtn"  >过号</a>
            </div>
        </div>

        <div class="col-md-8">
            <h4>预约记录列表:</h4>
            <table id="recordTable" class="table table-hover ">
                <thead>
                <tr class="table-dark">
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>急诊/门诊</th>
                    <th>预约医生</th>
                    <th>签到状态</th>
                </tr>
                </thead>
                <tbody>
<%--                遍历病人预约记录--%>
                <c:forEach items="${sessionScope.patient_list}" var="record">
                <tr>
                    <td>${record.outpatient_id}</td>
                    <td>${record.patient_name}</td>
                    <td>${record.patient_age}</td>
                    <td>${record.emergency}</td>
                    <td>${record.doctor_name}</td>
                    <td>${record.sign_in_situation}</td>
                </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- 重呼提示框 -->
<div id="recallModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">重 呼</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>当前患者未签到，是否移入排队队尾？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取 消</button>
                <button id="recallConfirmBtn" type="button" class="btn btn-primary">确 认</button>
            </div>
        </div>
    </div>
</div>
<!-- 过号提示框 -->
<div id="skipModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">过 号</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确定患者已被过号？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取 消</button>
                <button id="skipConfirmBtn" type="button" class="btn btn-warning">确 认</button>
            </div>
        </div>
    </div>
</div>

<!-- 选呼提示框 -->

<div id="callModal" class="modal">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选 呼</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-hover" style="text-align: center;">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>急诊/门诊</th>
                        <th>签到状态</th>
                        <th>科室</th>
                        <th >操作</th>
                    </tr>
                    </thead>
                    <tbody>
<%--                    遍历选呼队列--%>
                    <c:forEach items="${sessionScope.patient_list}" var="record">
                    <tr>
                        <td>${record.outpatient_id}</td>
                        <td>${record.patient_name}</td>
                        <td>${record.patient_age}</td>
                        <td>${record.emergency}</td>
                        <td>${record.doctor.office}</td>
                        <td>${record.sign_in_situation}</td>
                        <td><a href="<%=request.getContextPath()%>/ManageQueue?action=selectCall&outpatient_id=${record.outpatient_id}" class="btn btn-primary">叫号</a></td>
                    </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取 消</button>
                <button id="callConfirmBtn" type="button" class="btn btn-primary">确 认</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入Bootstrap核心JavaScript文件 -->
<script src="https://cdn.staticfile.org/bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
<script>
    // 获取相关DOM元素
    const waitList = document.getElementById("waitList");
    const recordTable = document.getElementById("recordTable");
    const callBtn = document.getElementById("callBtn");
    const recallBtn = document.getElementById("recallBtn");
    const skipBtn = document.getElementById("skipBtn");

    // 点击叫号按钮
    callBtn.addEventListener("click", () => {
        const waitItem = waitList.firstElementChild.nextElementSibling;
        if (waitItem) {
            const patientName = waitItem.textContent.trim().split(" ")[1];
            alert(`患者 ${patientName} 已被叫号`);
            waitItem.remove();
        } else {
            alert("没有等待叫号的患者");
        }
    });

    // 点击重呼按钮
    recallBtn.addEventListener("click", () => {
        const waitItem = waitList.firstElementChild;
        if (waitItem) {
            recallModal.show();
        } else {
            alert("没有等待叫号的患者");
        }
    });

    // 点击过号按钮
    skipBtn.addEventListener("click", () => {
        const waitItem = waitList.firstElementChild;
        if (waitItem) {
            skipModal.show();
        } else {
            alert("没有等待叫号的患者");
        }
    });

    // 点击选呼按钮
    recordTable.addEventListener("click", (event) => {
        if (event.target.tagName === "TD") {
            callModal.show();
        }
    });

    // 创建重呼提示框
    const recallModal = new bootstrap.Modal(document.getElementById("recallModal"), {
        keyboard: false
    });

    // 点击重呼提示框确认按钮
    document.getElementById("recallConfirmBtn").addEventListener("click", () => {
        const waitItem = waitList.firstElementChild;
        if (waitItem) {
            waitList.appendChild(waitItem);
        }
        recallModal.hide();
    });

    // 创建过号提示框
    const skipModal = new bootstrap.Modal(document.getElementById("skipModal"), {
        keyboard: false
    });

    // 点击过号提示框确认按钮
    document.getElementById("skipConfirmBtn").addEventListener("click", () => {
        skipModal.hide();
    });

    // 创建选呼提示框
    const callModal = new bootstrap.Modal(document.getElementById("callModal"), {
        keyboard: true
    });



    // 点击选呼提示框确认按钮
    document.getElementById("callConfirmBtn").addEventListener("click", () => {
        const selectedRow = recordTable.querySelector(".table-primary");
        if (selectedRow) {
            const patientName = selectedRow.children[1].textContent;
            alert(`您已选呼患者 ${patientName}`);
        }
        callModal.hide();
    });
</script>

<script type="text/javascript">
    //confirm是确认提示框函数
    //返回true表示点击确认
    $(function (){
        $("a.deleteClass").click(function (){
            return  confirm("你确定要删除【"+$(this).parent().parent().find("td:first").text()+"用户吗"+"】");
        })
    });
</script>
</body>
</html>